Vue.js コンポーネントにcssを当てる
html, cssの関係を知ってるなら、その知識をそのまま利用できる。
以下の形がベースで、ここから外れることはない。こいつを基本として、柔軟にいろんな方法を覚えればOK。
code: index.html
<p class="red">sample</p>
code: css
.red {
color: red;
}
種類は全部で6つある。
種類によって微妙に基本が変わるので注意。
hashで与えるパターン
配列で与えるパターン
クラスオブジェクトで与えるパターン
①普通に固定cssを与える方式
code: sample.vue
<template>
<v-sample class="red"><p>aaaaaaaa</p></v-sample>
</template>
<style>
.red {
color: red;
}
</style>
②v-bindを利用してclassの名前を動的に変更してcssを与える方法
code: sample.vue
<template>
<v-sample :class={red}><p>aaaaaaaaaaaa</p></v-sample>
</template>
<style>
.red {
color: red;
}
</style>
③条件付きで与える方法
code: sample.vue
// isRedがfalseの場合は、css（.red）が適用されない
<template>
<v-sample :class={red:isRed}><p>aaaaaaaaaaaa</p></v-sample>
</template>
<script>
export default {
data(){
return {
isRed:true
}
}
}
</script>
<style>
.red {
color: red;
}
</style>
④条件付きで複数与える方法（英字以外が入ってるclassは'で括ること
code: sample.vue
<template>
<v-sample :class={red:isRed, 'font-big':isBig}><p>aaaaaaaaaaaa</p></v-sample>
</template>
<script>
export default {
data(){
return {
isRed:true,
isBig:true
}
}
}
</script>
<style>
.red {
color: red;
}
.big {
font-size: 32px;
}
</style>
⑤注意.icon配列によるクラスのバインディング
code: sample.vue
<template>
</template>
<script>
export default {
data(){
return {
redClass: 'red',
bigFontClass: 'big'
}
}
}
</script>
<style>
.red {
color: red;
}
.big {
font-size: 32px;
}
</style>
⑥オブジェクトによるクラスのバインディング
code: sample.vue
// isRedがfalseの場合は、css（.red）が適用されない
<template>
<v-sample :class="samClass"><p>aaaaaaaaaaaa</p></v-sample>
</template>
<script>
export default {
data(){
return {
samClass: {
red: true,
'font-big': true
}
}
}
}
</script>
<style>
.red {
color: red;
}
.big {
font-size: 32px;
}
</style>
参考.icon